import { Card, Table, Typography, Button, Tag } from 'antd';

// 数据源
const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
    likes: ['唱歌', '跳舞'],
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    likes: ['rap', '篮球'],
  },
  {
    key: '3',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    likes: ['rap', '篮球'],
  },
  {
    key: '4',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    likes: ['rap', '篮球'],
  },
  {
    key: '5',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    likes: ['rap', '篮球'],
  },
  {
    key: '6',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    likes: ['rap', '篮球'],
  },
  {
    key: '7',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    likes: ['rap', '篮球'],
  },
  {
    key: '8',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    likes: ['rap', '篮球'],
  },
  {
    key: '9',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    likes: ['rap', '篮球'],
  },
  {
    key: '10',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    likes: ['rap', '篮球'],
  },
  {
    key: '11',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    likes: ['rap', '篮球'],
  },
  {
    key: '12',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    likes: ['rap', '篮球'],
  },
  {
    key: '13',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    likes: ['rap', '篮球'],
  },
];

// 列信息
const columns = [
  {
    title: '姓名',
    // dataIndex表示要将数据源的哪一个字段显示在这一列
    dataIndex: 'name',
    // render函数可以接收text，表示的就是数据源的dataIndex
    // 默认render的return text
    // record表示的是整条记录
    render(text: string) {
      return <Typography.Link>{text}</Typography.Link>;
    },
  },
  {
    title: '年龄',
    dataIndex: 'age',
    render(text: string, record: any) {
      return (
        <span>
          {record.name}的年龄是{text}
        </span>
      );
    },
  },
  {
    title: '住址',
    dataIndex: 'address',
  },
  {
    title: '爱好',
    dataIndex: 'likes',
    render(text: string[]) {
      return (
        <>
          {text.map((item) => (
            <Tag key={item}>{item}</Tag>
          ))}
        </>
      );
    },
  },
  {
    title: '操作',
    render(text: string, record: any) {
      return (
        <Button danger onClick={() => remove(record.key)}>
          删除
        </Button>
      );
    },
  },
];

const remove = (id: string) => {
  console.log(id);
};

const Index = () => {
  return (
    <Card title="基础表格">
      <Table dataSource={dataSource} columns={columns} />
    </Card>
  );
};

export default Index;
